<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-slot-machine">
      <input-normal label="转动一次时间" v-model="commonAttr.spinsTime" @change="onChangeAttr"></input-normal>
      <input-normal label="动画至少时间" v-model="commonAttr.animateTime" @change="onChangeAttr"></input-normal>
      <input-normal label="动画暂停时间" v-model="commonAttr.pauseTime" @change="onChangeAttr"></input-normal>
      <el-button type="primary"  @click.stop="onAddItem" class="margin-left-right-16 margin-bottom-10 margin-top-10"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists" :name="index+1" :key="index">
          <template #title>
            列表项{{index+1}}
            <i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <add-img-con :url="item.url" picAttr="url" :index="index" :isCrop='false' :height="100" class="margin-left-right-16"></add-img-con>
          <input-normal label="地址" v-model="item.url" @change="onUpdateItem(index)"></input-normal>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'

  import { mapActions } from 'vuex'
  import { editUtils } from '@/views/js/edit-utils'

  export default {
    name: "RightSlotMachine",
    mixins: [editUtils],
    components: {
      RightTemplate,
      AddImgCon,
      // ColorNormal,
      // DropdownNormal,
      // SliderNormal,
      // AddListItem,
      InputNormal,
    },
    methods:{
      ...mapActions("components", {
      }),
    },
  }
</script>
